<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  ~   Copyright 1999-2016 Asiainfo Technologies(China),Inc.
  ~    
  ~   Licensed under the Apache License, Version 2.0 (the "License");
  ~   you may not use this file except in compliance with the License.
  ~   You may obtain a copy of the License at
  ~    
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~    
  ~   Unless required by applicable law or agreed to in writing, software
  ~   distributed under the License is distributed on an "AS IS" BASIS,
  ~   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~   See the License for the specific language governing permissions and
  ~   limitations under the License.
  ~
  --%>

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/8/8
  Time: 17:19
  To change this template use File | Settings | File Templates.
--%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>配置调度及全量更新</title>
    <style>
        .btn {
            margin: 0px 5px 0px 0;
        }
    </style>

    <script>
        $(function(){

            $('#cluster-busi-type-table').bootstrapTable({
                onPostBody:function(){
                    $("[data-toggle='popover']").popover();
                }
            });


            $.post("${ctx}/schedule/getRefreshChangeBusiDataCronExpression", {}, function(data) {
                if (data.success){
                    $('#cronExpression').val(data.result);
                }
            });
            $('#setCronExpression').click(function () {
                $.post("${ctx}/schedule/setRefreshChangeBusiDataCronExpression", {
                    cronExpression: $('#cronExpression').val()
                }, function(data) {
                    if (data.success){
                        toastr.success("设置调度周期成功！");
                    }
                });
            });
            loadClusterBusiTypeTableData();
            $('#setCronExpression2').click(function () {
                $.post("${ctx}/schedule/setRefreshAllBusiDataCronExpression", {
                    clusterBusiTypeRefId: $('#clusterBusiTypeRefId').val(),
                    cronExpression: $('#cronExpression2').val()
                }, function(data) {
                    if (data.success){
                        toastr.success("设置调度周期成功！");
                        $('#schedule-config-window').modal('hide');
                    }
                });
            });
            $('#refresh-data').click(function(){
                loadClusterBusiTypeTableData();
            });


        });


        function clusterBusiTypeTableRowStyle(row, index){
            if (row.busiTypeId == null){
                return {classes: 'active'};
            }else{
                return {classes: ''};
            };
        }

        function formatOperColumn(value, row, index){
            var html = "";
            if (row.busiTypeId != null){
                html +=
                        '<button class="btn btn-default" href="#" onclick="openScheduleConfigWindow(\''+row.id+'\')">设置调度</button>';
                html +=
                        '<button class="btn btn-default" href="#" onclick="startRefreshAllData(\''+row.id+'\')">全量更新</button>';
            }
            return html;
        }

        function formatterColumnClusterName(value, row, index){
            if (value == null){
                return "";
            }else{
                if (row.busiName != null){
                    return "";
                }
                return value;
            }
        }

        function formatterColumnBusiName(value, row, index){
            if (value == null){
                return "";
            }else{
                return value + "("+ row.busiCode+")";
            }
        }

        function formatterColumnStatus(value, row, index){
            if (row.id == null){
                return "";
            }
            if (value == 1){
                return "<span style='color:blue'>更新中</span>";
            }else if (value == 2){
                return "<span style='color:green'>更新成功</span>";
            }else if (value == 3){
                var errorMsg = row.refreshErrorMsg;
                errorMsg = errorMsg.replace(/</g,"&lt;");//&lt;
                errorMsg = errorMsg.replace(/>/g,"&gt;");//&gt;
                return "<a style='color:red;cursor:pointer' data-toggle='popover' data-content='"+
                        (errorMsg)+
                "' data-original-title='错误信息' data-placement='top'>更新失败</a>";
            }else{
                return value;
            }
        }

        function formatterColumn(value, row, index){
            if (row.id == null){
                return "";
            }else{
                return value;
            }

        }

        function loadClusterBusiTypeTableData(){
            $.post("${ctx}/schedule/getClusterBusiTypeList",{}, function (data) {
                if (data.success){
                    $('#cluster-busi-type-table').bootstrapTable('load', data.result);
                }
            });
        }

        function openScheduleConfigWindow(id){
            var row = $('#cluster-busi-type-table').bootstrapTable('getRowByUniqueId', id);
            $('#clusterName').html(row.clusterName);
            $('#busiName').html(row.busiName);
            $('#clusterBusiTypeRefId').val(id);
            $.post("${ctx}/schedule/getRefreshAllBusiDataCronExpression", {clusterBusiTypeRefId:id}, function(data) {
                if (data.success){
                    $('#cronExpression2').val(data.result);
                    $('#schedule-config-window').modal('show');
                }
            });
        }



        function startRefreshAllData(id){
            $.post("${ctx}/schedule/refreshAllData",{clusterBusiTypeRefId: id}, function (data) {
                if (data.success){
                    toastr.success("正在后台全量更新数据，请过一段时间自行刷新查看状态！");
                    setTimeout(function () {
                        loadClusterBusiTypeTableData();
                    }, 1000);
                }
            });
        }

    </script>
</head>
<body>
    <div class="page-title">
        <h3>配置调度及全量更新</h3>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="widget-container fluid-height">
                <div class="heading" style="vertical-align: middle">
                    <i class="icon-edit"></i><span>读增量表更新数据调度设置</span>
                </div>
                <div class="widget-content padded">
                    <div class="row form-horizontal">
                        <div class="col-md-8">
                            <label class="col-md-2 control-label" style="text-align: right; padding-right: 0px">调度周期：
                            </label>
                            <div class="col-md-7">
                                <input class="form-control" id="cronExpression" name="cronExpression" type="text"
                                       placeholder="请输入Cron表达式,比如每分钟：0 0/1 * * * ?"/>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-default" type="button" id="setCronExpression">设置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="widget-container fluid-height">
                <div class="heading" style="vertical-align: middle">
                    <i class="icon-tasks"></i><span>全量更新业务列表</span>
                        <button type="button" class="btn pull-right" id="refresh-data">刷新列表</button>
                </div>
                <div class="widget-content padded text-center">
                    <table id="cluster-busi-type-table" data-toggle="table" data-unique-id="id"
                           data-classes="table table-no-bordered bg-white" data-striped="false"
                           data-single-select="false" data-show-header="true" data-row-style="clusterBusiTypeTableRowStyle"
                           data-pagination="false" data-sortable="false"
                           data-locale="zh-US">
                        <thead>
                        <tr>
                            <th data-field="clusterName" data-title="集群名称" data-halign="left" data-align="left"
                                data-valign="middle" data-width="20%" data-formatter="formatterColumnClusterName"></th>
                            <th data-field="busiName" data-title="业务系统" data-halign="left" data-align="left"
                                data-valign="middle" data-width="15%" data-formatter="formatterColumnBusiName"></th>
                            <th data-field="currentClusterName" data-title="当前集群指向" data-halign="left" data-align="left"
                                data-valign="middle" data-width="20%" data-formatter="formatterColumn"></th>
                            <th data-field="refreshStatus" data-title="最新更新状态" data-halign="center" data-align="center"
                                data-valign="middle" data-width="5%" data-formatter="formatterColumnStatus"></th>
                            <th data-field="refreshStartTime" data-title="最新更新开始时间" data-halign="center"
                                data-align="center" data-formatter="formatterColumn"
                                data-valign="middle" data-width="10%"></th>
                            <th data-field="refreshEndTime" data-title="最新更新结束时间" data-halign="center"
                                data-align="center" data-formatter="formatterColumn"
                                data-valign="middle" data-width="10%"></th>
                            <th data-field="id" data-title="操作" data-formatter="formatOperColumn" data-halign="center"
                                data-align="center" data-valign="middle" data-width="20%"></th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="schedule-config-window" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" style="width: 500px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">设置调度</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="replica-migration-form">
                        <div class="form-group">
                            <label class="col-md-3 control-label">集群名称：</label>
                            <div class="col-md-8">
                                <label class="control-label" id="clusterName">yyy</label>
                                <input id="clusterBusiTypeRefId" name="clusterBusiTypeRefId" type="hidden">

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">业务系统：</label>
                            <div class="col-md-8">
                                <label class="control-label" id="busiName">xxx</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="cronExpression2">调度周期：</label>
                            <div class="col-md-8">
                                <input class="form-control" id="cronExpression2" name="cronExpression2" type="text"
                                       placeholder="请输入Cron表达式,比如每分钟：0 0/1 * * * ?"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="setCronExpression2">设置</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
